<template>
  <view class="swiper-container">
    <swiper
      :indicator-dots="true"
      :autoplay="autoplay"
      :interval="interval"
      :circular="true"
      :current="currentIndex"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in imageList" :key="index">
        <image :src="item.imgPath" class="swiper-image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, defineProps } from "vue";
const imageList = ref([]);

// 当前显示的索引
const currentIndex = ref(0);

// 轮播图切换的回调函数
const onSwiperChange = (event) => {
  currentIndex.value = event.detail.current;
};

//获取轮播图数据
uni.request({
  url: "http://1.92.114.25:6624/getCarousel",
  method: "GET",
  data: {},
  success: (res) => {
    imageList.value = res.data.data;
    console.log("轮播图数据", res.data.data);
  },
  fail: (err) => {
    console.log(err);
  },
});
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
